<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{ height: statusHeight + 'px' }"></view>
		<view :style="{ height: intervalHeight + 'px' }"></view>
		<view :style="{ height: capsuleHeight + 'px' }" style="display: flex; align-items: center">
			<view class="close">
				<up-icon name="close" color="#fff" size="24" @click="back"></up-icon>
			</view>
		</view>
		<!-- #endif -->
		<view class="avatar">
			<image src="/static/logo.png" mode="" style="width: 144rpx; height: 144rpx"></image>
			<view class="p">先贤祠墓纪念堂</view>
		</view>
		<view class="form">
			<up-form labelPosition="left" ref="form1">
				<up-form-item prop="userInfo.name" borderBottom>
					<up-input placeholderClass="plClass" border="none" placeholder="请输入您的手机号" color="#fff"
						fontSize="36rpx" v-model="phoneNumber" maxlength="11"></up-input>
				</up-form-item>
			</up-form>
			<view class="not_register"> 未注册的手机号验证后自动创建账号 </view>
			<view class="xieyi">
				<view class="tips" v-if="!flag">请阅读并同意协议</view>
				<view class="read">
					<image src="http://112.124.50.179:8888/imgs/login/check.png" mode="" v-if="flag"
						@click="flag = !flag"></image>
					<image src="http://112.124.50.179:8888/imgs/login/not_check.png" mode="" v-else
						@click="flag = !flag"></image>
					已阅读并同意<text>《用户服务协议》</text>和<text>《隐私权政策》</text>
				</view>
			</view>
			<view class="btn">
				<up-button :disabled="!isDisabled" @click="sendCode" color="rgba(243, 224, 187, 1)" shape="circle">
					<text>发送短信验证码</text>
				</up-button>
			</view>
		</view>
		<view class="other">
			<view class="othen_login">
				<view class="line"></view> <text>其他方式登录</text>
				<view class="line"></view>
			</view>
			<view class="type">
				<view @click="goUrl('/pages/login/login_wx')">
					<image src="http://112.124.50.179:8888/imgs/login/w.png" mode=""></image>
					<text>微信登录</text>
				</view>
				<view @click="goUrl('/pages/login/login')">
					<image src="http://112.124.50.179:8888/imgs/login/m.png" mode=""></image>
					<text>密码登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";

	import {
		getCodeApi
	} from "@/API/login/login.js";
	// const statusBarHeight = getApp().globalData.statusBarHeight;
	// #ifdef MP-WEIXIN
	let value = wx.getMenuButtonBoundingClientRect();
	let statusHeight = uni.getSystemInfoSync().safeAreaInsets.top;
	let intervalHeight = value.bottom - statusHeight - value.height;
	let capsuleHeight = value.height;
	// #endif
	// let PADDING = 152 - statusHeight - intervalHeight - capsuleHeight + "rpx";
	// console.log(PADDING);
	let flag = ref(false);
	let phoneNumber = ref("");
	const isDisabled = computed(() => {
		if (phoneNumber.value) {
			return true;
		} else {
			return false;
		}
	});
	/**
	 * 校验数据
	 */
	const validateData = () => {
		if (phoneNumber.value === "") {
			uni.showToast({
				title: "请输入手机号！",
				icon: "none",
				duration: 2000,
			});
			return false;
		} else if (!flag.value) {
			uni.showToast({
				title: "请勾选用户协议！",
				icon: "none",
				duration: 2000,
			});
			return false;
		}
		return true;
	};

	/**
	 * 发送短信验证码
	 */
	const sendCode = async () => {
		if (!validateData()) {
			return;
		}
		uni.showLoading();
		let res = await getCodeApi({
			phoneNumber: phoneNumber.value,
			smsType: 2, //1:注册，2:登录，3:修改密码
		});
		if (res.data.code === 0) {
			uni.showToast({
				title: res.data.msg,
				icon: "success",
				duration: 1000,
			});
			uni.hideLoading();
			setTimeout(() => {
				goUrl(`/pages/login/code?phoneNumber=${phoneNumber.value}`);
			}, 500);
		} else {
			uni.showToast({
				title: res.data.msg,
				icon: "none",
				duration: 1000,
			});
		}
	};

	const back = () => {
		uni.navigateBack({
			delta: 1,
		});
	};
	const goUrl = async (url) => {
		uni.navigateTo({
			url: url,
		});
	};
</script>

<style lang="less">
	page {
		background: url("http://112.124.50.179:8888/imgs/login/bg.png") no-repeat;
		background-size: cover;
		background-position: 100%;
	}

	.content {
		.close {
			padding: 44rpx 0;
			// height: 88rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
		}

		.avatar {
			display: flex;
			align-items: center;
			color: #fff;
			flex-direction: column;
			font-size: 36rpx;
			padding-top: 64rpx;

			.p {
				padding-top: 36rpx;
				font-weight: bold;
			}
		}

		.form {
			padding: 120rpx 48rpx 0 48rpx;

			.xieyi {
				position: relative;

				image {
					position: relative;
					top: 1px;
					width: 40rpx;
					height: 40rpx;
				}

				view {
					display: flex;
					align-items: center;
				}

				.check {
					padding-right: 8rpx;
				}

				padding: 106rpx 0 40rpx 0;
				color: #999999;
				font-size: 24rpx;

				text {
					color: #fff;
				}
			}

			.tips {
				width: 224rpx;
				height: 56rpx;
				background-color: #2c2f2f;
				border-radius: 10rpx;
				position: absolute;
				top: 28rpx;
				color: #c5c5c5;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tips::before {
				content: "";
				width: 0;
				height: 0;
				border: 12rpx solid;
				position: absolute;
				bottom: -20rpx;
				left: 2rpx;
				border-color: #2c2f2f transparent transparent;
			}

			.not_register {
				padding-top: 16rpx;
				color: #999999;
				font-size: 24rpx;
			}

			.btn {
				text {
					color: black;
					font-size: 36rpx;
					font-weight: Medium;
					font-family: PingFang SC-Medium;
				}
			}

			.register {
				padding-top: 32rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;

				text:nth-child(1) {
					color: #5bd465;
				}

				text:nth-child(2) {
					color: #ff6b77;
				}
			}
		}

		.other {
			padding: 80rpx 0 60rpx 0;
			color: #c5c5c5;
			text-align: center;
			font-size: 24rpx;

			.othen_login {
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					padding: 0 40rpx;
				}
			}

			.type {
				padding-top: 92rpx;
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				//   width: 70%;
				margin: 0 auto;

				// width: 60%;
				view {
					display: flex;
					flex-direction: column;
					align-items: center;
					// margin-right: 144rpx;
					margin-left: 72rpx;
					margin-right: 72rpx;
				}

				image {
					width: 96rpx;
					height: 96rpx;
					padding-bottom: 16rpx;
				}
			}

			.line {
				width: 120rpx;
				height: 0rpx;
				background: #969da3;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 1px solid #666666;
				position: relative;
				top: 1px;
			}
		}
	}

	.read {
		image {
			margin-right: 8rpx;
		}
	}

	/deep/.u-form-item__body {
		border-bottom: 1px solid #c5c5c5 !important;
		padding: 16px 0 !important;
	}

	.u-button {
		height: 88rpx !important;
	}

	.plClass {
		font-size: 32rpx;
		color: #c5c5c5 !important;
	}
</style>